<template>
	<div class="body">
		<BaseHeader></BaseHeader>
		<div class="book">
			<div class="detail-box-lf">
				<div class="detail-info-box clearfix">
					<div class="detail-info-header-container clearfix">
						<div class="clearfix">
							<div class="detail-info-header-box-lf">
								<span class="cover_mask">
									<a>
										<!-- <img class="lazy" :src="getUrl(book.pic)" alt="" /> -->
										<img class="lazy" src="../assets/诡秘之主封面.jpg" />
									</a>
								</span>
							</div>
							<div style="margin-left: 23px" class="detail-info-header-box-rt detail-info-list">
								<h2>
									<!-- {{book.title}} -->
									诡秘之主
								</h2>
								<ul>

									<li>
										<p>状态&nbsp;:&nbsp;
											<!-- {{book.status}} -->
											已完结
										</p>
									</li>

									<li>
										<p>总字数&nbsp;：
											<!-- {{book.wordCount}} -->
											4465100
										</p>
									</li>
									<li>
										<p>类型&nbsp;：
											<!-- {{book.categoryId}} -->
											异世大陆
										</p>
									</li>
									<li>
										<p>发布时间&nbsp;：
											<!-- {{book.createTime}} -->
											2021-11-17 00:00:00
										</p>
									</li>
									<li>
										<p>更新时间&nbsp;：
											<!-- {{book.updateTime}} -->
											2021-11-24 11:23:10
										</p>
									</li>
									<li class="clearfix">
										<div class="album-score">
											<div class="re le">
												<h3>书籍评分：</h3>
												<div>
													<el-rate v-model="average" disabled :colors="colors"></el-rate>
												</div>
												<span class="sum">
													<!-- {{sum}} -->
													<!-- 5 -->
												</span>
												<span id="score">
													<!-- {{ average * 2 }} -->
													10
												</span>
											</div>
											<div style="margin-left: 65px;" class="le">
												<h3>评价：</h3>
												<div @click="setRank">
													<el-rate v-model="rank" :colors="colors" allow-half show-text></el-rate>
												</div>
											</div>
										</div>
									</li>
									<!-- <li class="clearfix" style="margin-top:10px;">
										
									</li> -->
									<li class="clearfix" style="margin-top:10px">
										<router-link :to="{ path: '/content'}">
											<span class="online_read "><i class="el-icon-reading"></i>点击阅读</span>
										</router-link>

										<span v-if="!isActive" class="online_read " @click="collection" style="margin-left: 20px;"><i class="el-icon-folder-add"></i>加入书架</span>
										<span v-if="isActive" class="online_read disabled" @click="delCollection" style="margin-left: 20px;"><i class="el-icon-folder-remove"></i>已入书架</span>
									</li>
								</ul>
							</div>
						</div>
						<div class="detail_info_intro">
							<h4 style="margin-bottom: 15px"><span>简介</span></h4>
							<div class="actual-height" style="padding-bottom: 0px">
								<p>
									<!-- {{book.introduction}} -->
									蒸汽与机械的浪潮中，谁能触及非凡？历史和黑暗的迷雾里，又是谁在耳语？我从诡秘中醒来，睁眼看见这个世界：
									枪械，大炮，巨舰，飞空艇，差分机；魔药，占卜，诅咒，倒吊人，封印物……光明依旧照耀，神秘从未远离，这是一段“愚者”的传说。
								</p>
							</div>
						</div>
					</div>
					<div class="directory clearfix">
						<h4 style="
              margin-bottom: 15px;
              font-size: 20px;
              font-weight: normal;
              display: block;
            ">
							<span>章节列表</span>
						</h4>
						<ul>
							<!-- <li
            v-for="item in directory"
            :key="item.id"
            @click="contentPage(item.id, item.bookId)"
          >
            {{ item.name }}
          </li> -->
							<router-link :to="{ path: '/content'}" replace="">
								<li>第一章 绯红</li>
							</router-link>
							<li>第二章 情况</li>
							<li>第三章 梅丽莎</li>
							<li>第四章 占卜</li>
							<li>第五章 仪式</li>
							<li>第六章 非凡者</li>
							<li>第七章 代号</li>
							<li>第八章 新的时代</li>
							<li>第九章 笔记</li>
							<li>第十章 常态</li>
							<li>第十一章 真正的厨艺</li>
							<li>第十二章 再次上门</li>
							<li>第十三章 值夜者</li>
							<li>第十四章 通灵者</li>
							<li>第十五章 邀请</li>
							<li>第十六章 狗拿耗子</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="detail-box-rt">
				<div class="announcer_container_box announcer_detail clearfix">
					<h4>作者</h4>
					<div class="content">
						<span class="avatar_mask">
							<span @click="">
								<!-- <img :src="getUrl(writer.pic)" alt=""/> -->
								<img src="../assets/author.png" />
							</span>
							<div class="msg">
								<span class="icon_qyzz">
									签约作家
								</span>

							</div>
						</span>
						<a class="announcer_name">
							<!-- {{ writer.name }} -->
							爱潜水的乌贼
						</a>

					</div>

				</div>
				<comment :playId="bookId"></comment>

			</div>

		</div>
	</div>
</template>

<script>
	import BaseHeader from "./BaseHeader.vue";
	import Comment from "./Comment.vue"
	export default {

		components: {
			BaseHeader,
			Comment,
		},

		data() {
			return {
				bookId: "1",
				writerId: "",
				wId: "writerId",
				book: [],
				writer: [],
				directory: [],
				count: 0,
				average: 0, //平均分
				rank: 5, //提交评价的分数
				sum: '', //评分人数
				colors: ['#99A9BF', '#F7BA2A', '#FF9900']
			};
		},

		mounted() {
			this.getBook();
			this.getBookDetail();
		},
		methods: {
			async getBook() {
				const {
					data: result
				} = await this.$http.get(`/book/${this.bookId}`)
				this.book = result.data;
				if(result.data.status==false){
					this.book.status = "已完结"
				}else{
					this.book.status = "连载中"
				}
				console.log(this.book)
				console.log(this.book.introduction)
			},
			async getBookDetail() {
				const {
					data: result
				} = await this.$http.get(`/detail/${this.bookId}`)
				console.log(result);
			},
			// 通过JS格式化时间
			formatDate (row, column, cellValue, index) {
			  const date = new Date(cellValue)
			  const year = date.getFullYear()
			  const month = (date.getMonth() + 1 + '').padStart(2, '0')
			  const day = (date.getDate() + '').padStart(2, '0')
			  const HH = (date.getHours() + '').padStart(2, '0')
			  const MM = (date.getMinutes() + '').padStart(2, '0')
			  const SS = (date.getSeconds() + '').padStart(2, '0')
			  return year + '-' + month + '-' + day + ' ' + HH + ':' + MM + ':' + SS
			}
		},
		beforeCreate() {
			document.querySelector('body').setAttribute('style', 'margin : 0 ')
		}
	}
</script>
<style lang="css">
	.clearfix:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
		font-size: 0;
		/* float: left; */
	}

	a {
		text-decoration: none;
		color: #333;
	}

	.book {
		margin: 0px auto;
		width: 1200px;
	}

	.detail-box-lf,
	.detail-box-rt {
		display: inline-block;
		zoom: 1;
	}

	.detail-box-lf {
		width: 700px;
	}

	.detail-info-box {
		width: 900px;
	}

	.detail-info-box .cover_mask {
		display: block;
		width: 260px;
		height: 350px;
		box-shadow: 0 1px 5px #c2c2c2;
	}

	.detail-info-box .cover_mask a {
		display: block;
		box-shadow: 4px 4px 12px #999;
	}

	.detail-info-box .cover_mask a img {
		margin-top: 20px;
		display: block;
		width: 260px;
		height: 350px;
	}

	.detail-info-header-box-rt {
		width: 500px;
		position: relative;
	}

	.detail-info-list h2 {
		padding-left: 35px;
		font-size: 30px;
		font-weight: bold;
		display: block;
		margin-top: 15px;
	}

	.detail-info-list ul {
		margin-top: 5px;
	}

	.detail-info-list ul li {
		font-size: 15px;
		line-height: 20px;
		display: block;
		color: #787878;
	}

	.detail-info-header-box-lf,
	.detail-info-header-box-rt {
		display: inline-block;
		float: left;
		zoom: 1;
	}

	.detail_info_intro {
		position: relative;
		overflow: hidden;
		width: 900px;
		margin-top: 0px;

	}

	.detail_info_intro h4 {
		font-size: 20px;
		font-weight: normal;
	}

	.detail_info_intro .actual-height p {
		font-size: 14px;
		line-height: 28px;
		color: #666;
	}

	.directory {
		margin: 20px 0;
		/* display: inline-block; */
	}

	.directory ul {
		width: 900px;
	}

	.directory li {
		width: 450px;
		font-size: 15px;
		line-height: 24px;
		/* display: block; */
		/* clear: both; */
		height: 24px;
		padding: 6px 0;
		color: #333;
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		border-bottom: 1px dashed #e5e5e5;
		/* position: relative; */
		float: left;
	}

	.directory li:hover {
		color: #2DA0FF;
	}

	h4 span {
		color: #2DA0FF;
		border-left: 3px solid #2DA0FF;
		padding-left: 8px;
	}

	.detail-box-rt {
		float: right;
		width: 250px;
	}

	.content {
		padding: 0px 6px 10px 10px;
	}

	.announcer_container_box {
		height: 250px;
		background: #efefef;
	}

	.announcer_detail h4 {
		background-color: #2DA0FF;
		padding: 0 16px;
		height: 38px;
		line-height: 38px;
		position: relative;
		font-size: 14px;
		color: #fff;
		font-weight: bold;
	}

	.announcer_detail .avatar_mask {
		display: block;
		overflow: hidden;
		width: 85px;
		height: 120px;
		margin: 0 auto;
		margin-top: 7px;
	}

	.announcer_detail .avatar_mask span {
		display: block;
		cursor: pointer;
	}

	.announcer_detail .avatar_mask span img {
		position: relative;
		z-index: 5;
		display: block;
		zoom: 1;
		width: 100px;
		height: 100px;
		-webkit-border-radius: 50%;
		-webkit-border-radius: 38px;
		border-radius: 50%;
		border-radius: 38px;
		margin-left: -8px;
	}

	.announcer_detail .announcer_name {
		font-size: 18px;
		font-weight: normal;
		line-height: 32px;
		display: block;
		text-align: center;
		letter-spacing: 1px;
	}

	.announcer_name {
		padding-top: 10px;
	}

	.announcer_detail .contact_info {
		margin-top: 10px;
		padding-top: 10px;
		border-top: solid 1px rgba(0, 0, 0, 0.1);
	}

	.announcer_detail .contact_info p {
		font-size: 12px;
		line-height: 16px;
		display: block;
		overflow: hidden;
		max-height: 64px;
		color: #787878;
	}

	.online_read {
		float: left;
		width: 100px;
		height: 40px;
		text-align: center;
		color: #fff;
		line-height: 40px;
		cursor: pointer;
		margin: 0px 15px 0 0;
		border-radius: 3px;
		background-color: #2DA0FF;
	}

	.disabled {
		color: rgba(0, 0, 0, .25);
		background-color: #f5f5f5;
		border: 1px solid #d9d9d9;
	}

	.album-score .re {
		margin-top: -15px;
		position: relative;
	}

	.album-score .le {
		margin-top: -10px;
		float: left;
	}

	#score {
		position: absolute;
		right: -50px;
		top: 22px;
		font-size: 40px;
	}

	.sum {
		color: #2DA0FF;
	}

	.icon_qyzz {
		padding: 5px;
		line-height: 1;
		background: #f70;
		color: #fff;
		border-radius: 3px;
		display: inline-block;
		text-align: center;
		font-size: 14px;
	}

	.msg {
		margin-top: -5px;
		z-index: 10;
		position: relative;
	}
</style>
